<template>
	<div class="box">
		<Head :searchTypes="searchTypes"></Head>
		<div class="banner">
			<swipe>
			<mt-swipe :auto="4000">
				<mt-swipe-item><img src="https://image1.guazistatic.com/qn191009101917c546970984195611067c4d04dc24f046.jpg?imageView2/2" alt=""></mt-swipe-item>
				<mt-swipe-item><img src="https://image1.guazistatic.com/qn190916165555d2622fc2869c06f80d5d27712845b2dc.jpg?imageView2/2" alt=""></mt-swipe-item>
			</mt-swipe>
			</swipe>
		</div>
		<div class="main">
			<div class="mains">
				<div class="main-t">
					<div class="host">
						<h4>热门二手车</h4>
						<router-link to="/BuyCars">
							更多 <i class="el-icon-arrow-right"></i>
						</router-link>

					</div>
					<!-- <el-row :gutter="20" class="hosttext">
						<el-col :span="6">
							<div class="grid-content bg-purple" @click='_search({start:0,num:20,keys:"",table:"brief"})'>
								3万以下</div>
						</el-col>
						<el-col :span="6">
							<div class="grid-content bg-purple" @click="getPtah($router,'p3')">3-5万</div>
						</el-col>
						<el-col :span="6">
							<div class="grid-content bg-purple" @click="getPtah($router,'p4')">5-7万</div>
						</el-col>
						<el-col :span="6">
							<div class="grid-content bg-purple" @click="getPtah($router,'p5')">7-9万</div>
						</el-col>
					</el-row> -->
					<HostCar></HostCar>
				</div>
			</div>
			<div class="mains">
				<div class="recomm">
					<div class="host" style="border-bottom:0;">
						<h4>为您推荐</h4>
						<router-link to="/BuyCars">
							更多 <i class="el-icon-arrow-right"></i>
						</router-link>
					</div>
				</div>
			</div>
			<CarListTJ :bodys="bodys">
			</CarListTJ>
		</div>

	</div>
</template>

<script>
	// @ is an alias to /src
	import Head from '@/components/Head.vue'
	import CarListTJ from '@/components/CarListTJ.vue'
	import HostCar from '@/components/HostCar.vue'
	import { search } from '../api/jsoup'
	export default {
		name: 'Home',
		components: {
			Head,
			CarListTJ,
			HostCar
		},
		data() {
			return {
				// 搜索框类型
				searchTypes: 1,
				bodys:[],
			}
		},
		methods: {
			_search:function(data){
				search(data,this.__search);
			},
			__search:function(data){
				let res = eval("(" + data + ")");
				this.bodys = res[0];
			}
		},
		mounted() {
			this._search({start:0,num:20,keys:"",table:"brief"});
		}
	}
</script>

<style>
	.box {
		margin-bottom: 30px;
	}

	.banner {
		width: 100%;
		height: 170px;

	}

	.banner img {
		width: 100%;
	}

	.host {
		display: flex;
		width: 100%;
		justify-content: space-between;
		line-height: 2.1875rem;
	}

	.host h4 {
		font-weight: 500;
		font-size: 0.9375rem;
	}

	.mains {
		padding: 0.625rem 1.25rem;
		box-sizing: border-box;
	}

	.main .mains:nth-child(1) {
		border-bottom: 6px solid #f5f7fa;
	}

	.host a {
		text-decoration: none;
		color: #8f96a0;
		font-size: 0.75rem;
	}

	.hosttext {
		line-height: 35px;
		font-size: 14px;
		color: #303741;
		font-weight: 400;
		text-align: center;
	}
</style>
